<template>
  <view>
    <view class="nav-bar"></view>
    <view class="container">
      <view class="tab-view">
        <view
          @click="tabClick(item, index)"
          :class="current === index ? 'tab-selected' : ''"
          class="tab-item"
          v-for="(item, index) in tabs">
          {{ item }}
        </view>
      </view>

      <view class="card-view">
        <view class="action-btn-view">
          <view class="left">
            <view class="title">{{ detailData.status }}</view>
            <view class="tip" v-if="detailData.status === '待评估'">
              请评估患者状态
            </view>
            <view class="tip" v-else-if="detailData.status === '待派发'">
              请选择需要派发的护士
            </view>
            <view class="tip" v-else-if="detailData.status === '待出发'">
              请充分了解患者情况，注意路程安全
            </view>
            <view class="tip" v-else-if="detailData.status === '待服务'">
              请点击开始服务按钮，可开启录音服务
            </view>
            <view class="tip" v-else-if="detailData.status === '服务中'">
              服务结束后，请点击结束按钮
            </view>
            <view class="tip" v-else-if="detailData.status === '已完成'">
              本次订单已完成
            </view>
            <view class="tip" v-else>{{ detailData.status }}</view>
          </view>
          <view
            class="btn"
            @click="start"
            v-if="detailData.status === '待出发'">
            立即出发
          </view>
          <view
            class="btn"
            @click="startService"
            v-if="detailData.status === '待服务'">
            开始服务
          </view>
          <view
            class="btn"
            @click="navToServiceSummary"
            v-if="detailData.status === '服务中'">
            结束服务
          </view>
        </view>
      </view>

      <view class="tab-container tab-1" v-if="current === 0">
        <view class="card-view">
          <view class="info-row">
            <view class="name">派发服务时间</view>
            <view class="value">{{ detailData.toDoorTime || "" }}</view>
          </view>
          <view class="info-row">
            <view class="name">服务地址</view>
            <view class="value">{{ detailData.visitorAddress }}</view>
            <view class="nav-btn" @click="navigation">导航</view>
          </view>
          <view class="info-row">
            <view class="name">就诊人</view>
            <view class="value">
              {{ detailData.visitor }} {{ detailData.sex }}
              {{ detailData.age }}岁
            </view>
          </view>
          <view class="info-row">
            <view class="name">联系人</view>
            <view class="value">{{ detailData.contactName }}</view>
          </view>
          <view class="info-row">
            <view class="name">联系电话</view>
            <view class="value">{{ detailData.contactPhone }}</view>
          </view>
          <view class="info-row">
            <view class="name">预约项目</view>
            <view class="value">{{ serviceItem }}</view>
          </view>
        </view>

        <view class="card-view">
          <view class="card-title">诊断证明</view>
          <view class="card-body">
            <uni-grid :column="3" :showBorder="false" :highlight="false">
              <uni-grid-item v-for="item in diagnosisProofList">
                <view class="grid-item">
                  <image :src="item" @click="imgclick(item)"></image>
                </view>
              </uni-grid-item>
            </uni-grid>
          </view>
        </view>

        <view class="card-view">
          <view class="card-title">情况描述</view>
          <view class="card-body description-text">
            {{ detailData.situationDesc }}
          </view>
        </view>
        <view class="card-view">
          <view class="card-title">本单收益</view>
          <view class="card-body description-text">
            {{ detailData.income }}元
          </view>
        </view>
        <view class="card-view last-card">
          <view class="order-row">
            <view class="name">订单编号</view>
            <view class="value">{{ detailData.orderNum }}</view>
            <view class="copy-btn">复制</view>
          </view>
          <view class="order-row">
            <view class="name">下单时间</view>
            <view class="value">{{ detailData.orderTime }}</view>
          </view>
          <view class="order-row">
            <view class="name">派单时间</view>
            <view class="value">{{ detailData.receiveOrderTime }}</view>
          </view>
        </view>
      </view>

      <template v-if="orderAssessInfoList.length > 0">
        <view class="tab-container tab-2" v-if="current === 1">
          <view class="card-view last-card">
            <template v-for="(item, index) in orderAssessInfoList">
              <view class="evaluate-row">
                <view class="name">{{ item.questionName }}</view>
                <view class="value">
                  <view class="picker-item">
                    <view>{{ item.questionAnswer }}</view>
                  </view>
                </view>
              </view>
            </template>
          </view>
        </view>
      </template>
    </view>

    <view class="bottom-view status-1" v-if="detailData.status === '待出发'">
      <view class="line-btn" @click="callPhone">患者电话</view>
      <view class="submit-btn" @click="start">出发</view>
    </view>

    <!-- 		<view class="bottom-view status-1" v-if="detailData.status === '待服务'">
			<view class="line-btn" @click="navToEvaluate">现场评估表</view>
			<view class="submit-btn" @click="startService">开始服务</view>
		</view> -->
    <view class="bottom-view status-2" v-if="detailData.status === '待服务'">
      <view class="submit-btn" @click="startService">开始服务</view>
    </view>

    <view
      class="bottom-view status-3"
      style="justify-content: flex-end"
      v-if="detailData.status === '服务中'">
      <!-- <view class="line-btn">新增耗材</view> -->
      <!-- <view class="line-btn">耗材退款</view> -->
      <view class="line-btn" @click="navToMaterialInfo">增改耗材</view>

      <view class="line-btn" @click="navToProject">新增服务</view>
      <view class="line-btn" @click="navToRefund">申请退款</view>
      <!-- <view class="line-btn">评价</view> -->
      <view class="submit-btn" @click="navToServiceSummary">结束服务</view>
      <!-- 	<view class="submit-btn" @click="subscribeMsg">结束服务</view> -->
    </view>

    <view class="bottom-view status-4" v-if="false">
      <view class="submit-btn">去总结</view>
    </view>

    <view class="bottom-view status-5" v-if="false">
      <view class="line-btn">查看总结</view>
    </view>

    <uni-popup ref="serviceFinishTimeDialog" type="dialog">
      <uni-popup-dialog
        ref="inputClose"
        mode="base"
        title="填写结束时间"
        @confirm="serviceFinishTimeDialogConfirm">
        <uni-datetime-picker v-model="serviceFinishTime" :border="false" />
      </uni-popup-dialog>
    </uni-popup>

    <view class="float-view" v-if="detailData.status === '服务中'">
      <!-- <view class="float-view"> -->
      <view class="item" @click="onRecordTap">
        <uni-icons
          type="mic-filled"
          color="#fff"
          v-if="recordInfo.status === 'none'"></uni-icons>
        <view
          class="recording-icon"
          v-else-if="recordInfo.status === 'recording'">
          <view class="recording-icon-inner"></view>
        </view>
        <view class="text">{{ recordInfo.text }}</view>
      </view>
      <view class="item" @click="navToOneButtonAlarm">
        <uni-icons type="phone-filled" color="#fff"></uni-icons>
        <view class="text">一键报警</view>
      </view>
    </view>
  </view>
</template>

<script>
import * as orderInfo from "../../common/api/orderInfo.js";
import * as orderNurseAssessInfo from "../../common/api/orderNurseAssessInfo.js";
import * as upload from "../../common/upload.js";
import * as soundRecord from "../../common/api/soundRecord.js";
const recorderManager = uni.getRecorderManager();

export default {
  data() {
    return {
      tabs: ["预约信息", "护理评估"],
      current: 0,
      wxOpenid: "",
      uid: "",
      templateId: "ECBQnn0plovzljftmioB9-wdyBncXQwcru9AF0hVxSs",
      detailData: {},
      serviceItem: "",
      diagnosisProofList: [],
      orderAssessInfoList: [],
      questionList: [],
      form: {
        uid: "",
        orderUid: "",
        orderNum: "",
        assessInfos: [],
      },
      serviceFinishTime: "",
      recordInitInfo: {
        text: "服务录音",
        status: "none",
        voicePath: "",
        hour: 0,
        minutes: 0,
        seconds: 0,
        timer: null,
      },
      recordInfo: {},
    };
  },
  onLoad(opt) {
    if (opt.uid) {
      this.uid = opt.uid;
      this.wxOpenid = opt.wxOpenid;
    }
    this.resetRecordInfo();
    recorderManager.onStop((res) => {
      console.log("recorder stop" + JSON.stringify(res));
      this.recordInfo.voicePath = res.tempFilePath;
      this.checkUploadRecord(this.recordInfo.voicePath);
      this.resetRecordInfo();
    });
    recorderManager.onError((res) => {
      uni.showToast({
        title: "录音失败:" + JSON.stringify(res),
        icon: "none",
      });
      console.log("recorder onError" + JSON.stringify(res));
      this.resetRecordInfo();
    });
  },
  onShow() {
    this.current = 0;
    this.getData();
  },
  methods: {
    tabClick(item, index) {
      this.current = index;
      this.initEvaluationQuestion();
    },
    imgclick(val) {
      uni.previewImage({
        urls: [val],
      });
    },
    getData() {
      const param = {
        uid: this.uid,
      };
      orderInfo
        .queryById(param)
        .then((result) => {
          console.log(result);
          this.detailData = result.data.data;
          this.setServiceItem();
          this.setDiagnosisProofList();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    setServiceItem() {
      const list = this.detailData.itemInfos || [];
      this.serviceItem = list.map((e) => e.serviceItem).join("|");
    },
    setDiagnosisProofList() {
      const diagnosisProof = this.detailData.diagnosisProof || "";
      if (diagnosisProof) {
        this.diagnosisProofList = diagnosisProof.split("|");
      }
    },
    navigation() {
      uni.openLocation({
        latitude: parseFloat(this.detailData.latitude),
        longitude: parseFloat(this.detailData.longitude),
        name: this.detailData.visitorAddress,
        address: this.detailData.visitorAddress,
        success: (res) => {
          console.log("打开系统位置地图成功");
        },
        fail: (error) => {
          console.log(error);
        },
      });
    },
    refuse() {
      uni.showModal({
        title: "提示",
        content: "确认拒绝？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = {
              uid: this.uid,
              status: "已拒绝",
            };
            orderInfo
              .update(param)
              .then((result) => {
                this.getData();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    evaluate() {
      this.current = 1;
    },
    evaluateSubmit() {
      this.navToChooseNurse();
    },
    navToChooseNurse() {
      uni.navigateTo({
        url: "/pages/chooseNurse/chooseNurse?uid=" + this.uid,
      });
    },
    start() {
      uni.showModal({
        title: "提示",
        content: "确认出发？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = {
              uid: this.uid,
              setOutTime: new Date().format("yyyy-MM-dd hh:mm:ss"),
              status: "待服务",
            };
            orderInfo
              .update(param)
              .then((result) => {
                this.getData();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    startService() {
      this.checkIsEvaluated((res) => {
        // if(!res){
        // 	uni.showToast({
        // 		title:'请先完成现场评估表',
        // 		icon:'none'
        // 	})
        // 	return
        // }
        uni.showModal({
          title: "提示",
          content: "开始服务？",
          success: (res) => {
            if (res.confirm) {
              console.log("用户点击确定");
              const param = {
                uid: this.uid,
                status: "服务中",
              };
              orderInfo
                .update(param)
                .then((result) => {
                  this.getData();
                })
                .catch((error) => {
                  console.log(error);
                });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      });
    },
    endService() {
      uni.showModal({
        title: "提示",
        content: "结束服务？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = {
              uid: this.uid,
              serviceFinishTime: this.serviceFinishTime,
              status: "已完成",
            };
            orderInfo
              .update(param)
              .then((result) => {
                this.getData();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },

    showServiceFinishTimeDialog() {
      this.$refs.serviceFinishTimeDialog.open();
    },
    serviceFinishTimeDialogConfirm() {
      if (!this.serviceFinishTime) {
        uni.showToast({
          title: "请填写结束时间",
          icon: "error",
        });
        return;
      }
      this.endService();
    },

    async subscribeMsg() {
      try {
        const res = await uni.request({
          // url: 'http://192.168.1.21:8050/applet/user/nurse/access/pushMessage',
          url: "https://applet.youtuyiliao.com/api/bedServer/nurse/access/pushMessage",
          method: "POST",
          data: {
            templateId: "ECBQnn0plovzljftmioB9-wdyBncXQwcru9AF0hVxSs",
            type: "user",
            uid: this.uid, // 用户 openid（需提前获取）
          },
        });
        console.log("item", res);
        if (res.data.code === 200) {
          uni.showToast({ title: "消息已发送" });
        } else {
          uni.showToast({ title: "发送失败", icon: "none" });
        }
      } catch (error) {
        console.error("请求后端失败:", error);
      }
    },

    // 调用后端接口发送消息
    // async  sendMsgToServer() {
    //   try {
    //     const res = await uni.request({
    //       url: 'http://192.168.1.21:8050/applet/user/nurse/access/pushMessage',
    //       method: 'POST',
    //       data: {
    //         templateId: this.templateId,
    // 		type:'success',
    //         openId:'oSlo35JVT3q6rchUFOdIwqgC9wT0', // 用户 openid（需提前获取）
    //         page: 'pages/result/result', // 点击消息跳转的小程序页面（可选）
    //         // data: { // 模板变量（需与模板定义的关键词匹配）
    //         //   thing1: { value: '订单标题' },
    //         //   date2: { value: '2025-08-15' },
    //         //   thing3: { value: '物流状态：已发货' }
    //         // }
    //       }
    //     });
    // 				  console.log("item", res)
    //     if (res.data.code === 0) {
    //       uni.showToast({ title: '消息已发送' });
    //     } else {
    //       uni.showToast({ title: '发送失败', icon: 'none' });
    //     }
    //   } catch (error) {
    //     console.error('请求后端失败:', error);
    //   }
    // },
    navToServiceSummary() {
      uni.showModal({
        title: "提示",
        content: "你确认已完成服务？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            uni.navigateTo({
              url:
                "/pages/serviceSummary/serviceSummary?uid=" +
                this.detailData.uid,
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
      this.subscribeMsg();
    },
    navToMaterialInfo() {
      uni.navigateTo({
        url: "/pages/consumable/consumable?uid=" + this.uid,
      });
    },
    navToProject() {
      uni.navigateTo({
        url:
          "/pages/project/project?uid=" +
          this.uid +
          "&wxOpenid=" +
          this.wxOpenid,
      });
    },
    navToRefund() {
      uni.navigateTo({
        url:
          "/pages/refund/refund?uid=" +
          this.uid +
          "&orderAmount=" +
          this.detailData.orderAmount,
      });
    },
    navToEvaluate() {
      this.checkIsEvaluated((res) => {
        if (res) {
          uni.showToast({
            title: "已完成现场评估表",
            icon: "none",
          });
          return;
        }
        uni.navigateTo({
          url: "/pages/evaluate/evaluate?uid=" + this.uid,
        });
      });
    },
    initEvaluationQuestion() {
      this.getOrderAssessInfo();
    },
    getOrderAssessInfo() {
      const param = {
        orderUid: this.uid,
      };
      orderNurseAssessInfo
        .queryByPage(param)
        .then((result) => {
          this.orderAssessInfoList = result.data.data.rows || [];
        })
        .catch((error) => {
          console.log(error);
        });
    },
    checkIsEvaluated(callback) {
      const param = {
        orderUid: this.uid,
      };
      orderNurseAssessInfo
        .queryByPage(param)
        .then((result) => {
          this.orderAssessInfoList = result.data.data.rows || [];
          if (this.orderAssessInfoList.length > 0) {
            callback(true);
          } else {
            callback(false);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    callPhone() {
      uni.showModal({
        title: "提示",
        content: "确认拨打电话？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const phoneNumber = this.detailData.contactPhone;
            uni.makePhoneCall({
              phoneNumber: phoneNumber,
              success() {},
              fail() {
                uni.showToast({
                  title: "拨打电话失败",
                  icon: "error",
                });
              },
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    navToOneButtonAlarm() {
      uni.navigateTo({
        url: "/pages/oneButtonAlarm/oneButtonAlarm?uid=" + this.uid,
      });
    },
    onRecordTap() {
      if (this.recordInfo.status === "none") {
        this.startRecord();
      } else if (this.recordInfo.status === "recording") {
        this.endRecord();
      }
    },
    startRecord() {
      uni.authorize({
        scope: "scope.record",
        success: () => {
          console.log("开始录音");
          recorderManager.start({
            duration: 600000,
            format: "mp3",
          });
          uni.showToast({
            title: "开始录音",
            icon: "none",
          });
          this.resetRecordInfo();
          this.recordInfo.text = "录音中...";
          this.recordInfo.status = "recording";
          this.recordInfo.timer = setInterval(() => {
            this.recordInfo.seconds++;
            if (this.recordInfo.seconds >= 60) {
              this.recordInfo.seconds = 0;
              this.recordInfo.minutes = this.recordInfo.minutes + 1;
            }
            if (this.recordInfo.minutes >= 60) {
              this.recordInfo.minutes = 0;
              this.recordInfo.hour = this.recordInfo.hour + 1;
            }
            const format = (val) => {
              return val < 10 ? `0${val}` : val;
            };
            const hour = format(this.recordInfo.hour);
            const minutes = format(this.recordInfo.minutes);
            const seconds = format(this.recordInfo.seconds);
            this.recordInfo.text = `${minutes}:${seconds}`;
          }, 1000);
        },
      });
    },
    endRecord() {
      console.log("录音结束");
      recorderManager.stop();
      uni.showToast({
        title: "结束录音",
        icon: "none",
      });
      this.resetRecordInfo();
    },
    resetRecordInfo() {
      if (this.recordInfo.timer) {
        clearInterval(this.recordInfo.timer);
      }
      this.recordInfo = Object.assign({}, this.recordInitInfo);
    },
    checkUploadRecord(path) {
      uni.showModal({
        title: "提示",
        content: "是否上传录音",
        success: (res) => {
          if (res.confirm) {
            this.uploadRecord(path);
          }
        },
      });
    },
    uploadRecord(path) {
      upload
        .uploadFile(path)
        .then((res) => {
          const param = {
            orderNum: this.detailData.orderNum,
            soundRecordFile: res.data.fileName,
          };
          console.log("res -->", res);
          console.log("param -->", param);
          soundRecord
            .create(param)
            .then((res2) => {
              uni.showToast({
                title: res2.data.msg
                  ? res2.data.msg
                  : JSON.stringify(res2.data),
                icon: "none",
              });
            })
            .catch((err1) => {
              uni.showToast({
                title: "上传失败:" + JSON.stringify(err1),
                icon: "none",
              });
              console.log(err1);
            });
        })
        .catch((err2) => {
          uni.showToast({
            title: "上传失败:" + JSON.stringify(err2),
            icon: "none",
          });
          console.log(err2);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar {
  height: 910rpx;
  background: linear-gradient(to bottom, #2eb0d9, #71c8e3, #f9f9f9);
}

.container {
  margin-top: -880rpx;
  display: flex;
  flex-direction: column;
}

.tab-view {
  width: 100%;
  display: flex;
  justify-content: space-around;

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 34rpx;
  }

  .tab-selected {
    color: white;
  }

  .tab-selected::after {
    content: "";
    width: 40rpx;
    height: 6rpx;
    border-radius: 3rpx;
    background: white;
    margin-top: 26rpx;
  }
}

.card-view {
  margin-left: 20rpx;
  margin-right: 20rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;

  .card-title {
    color: #232323;
    font-size: 30rpx;
    font-weight: bold;
  }

  .card-body {
    margin-top: 26rpx;
  }
}

.tab-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.action-btn-view {
  display: flex;
  align-items: center;

  .left {
    flex: 1;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 40rpx;
      color: #232323;
      font-weight: bold;
    }

    .tip {
      color: rgba(35, 35, 35, 0.5);
      font-size: 26rpx;
      margin-top: 14rpx;
    }
  }

  .btn {
    width: 180rpx;
    height: 80rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: #2eb0d9;
    font-size: 28rpx;
  }
}

.info-row {
  display: flex;
  align-items: center;
  min-height: 100rpx;

  .name {
    width: 200rpx;
    color: #232323;
    font-weight: bold;
    font-size: 30rpx;
  }

  .value {
    color: #232323;
    font-size: 30rpx;
    flex: 1;
  }

  .nav-btn {
    width: 96rpx;
    height: 48rpx;
    border: solid 2rpx #2eb0d9;
    border-radius: 24rpx;
    color: #2eb0d9;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.grid-item {
  width: 100%;
  height: 100%;
  border: solid 2rpx #f6f6f6;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rpx;
  box-sizing: border-box;

  image {
    width: 100%;
    height: 100%;
  }
}

.description-text {
  color: rgba(35, 35, 35, 0.8);
  font-size: 30rpx;
}

.last-card {
  margin-bottom: 120rpx;
}

.order-row {
  display: flex;
  align-items: center;
  height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .name {
    width: 150rpx;
    font-size: #232323;
    font-weight: 28rpx;
  }

  .value {
    color: rgba(35, 35, 35, 0.8);
    font-size: 28rpx;
  }

  .copy-btn {
    color: #2eb0d9;
    margin-left: 8rpx;
    font-size: 26rpx;
  }
}

.bottom-view {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  display: flex;
  padding: 14rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.status-1 {
  .line-btn {
    width: 250rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2rpx #2eb0d9;
    color: #2eb0d9;
    border-radius: 40rpx;
  }

  .submit-btn {
    background: #2eb0d9;
    color: white;
    width: 420rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
  }
}

.status-2 {
  .submit-btn {
    background: #2eb0d9;
    color: white;
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
  }
}

.status-3 {
  .line-btn {
    width: 180rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2rpx #2eb0d9;
    color: #2eb0d9;
    border-radius: 40rpx;
    margin-right: 10rpx;
  }

  .submit-btn {
    background: #2eb0d9;
    color: white;
    width: 290rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
  }
}

.status-4 {
  .submit-btn {
    background: #2eb0d9;
    color: white;
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
  }
}

.status-5 {
  justify-content: flex-end;

  .line-btn {
    width: 180rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2rpx #2eb0d9;
    color: #2eb0d9;
    border-radius: 40rpx;
  }
}

.evaluate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .name {
    width: 150rpx;
    font-size: #232323;
    font-weight: 28rpx;
    font-weight: bold;
  }

  .value {
    color: rgba(35, 35, 35, 0.8);
    font-size: 28rpx;
  }

  .picker-item {
    color: rgba(136, 136, 136, 0.8);
    font-size: 28rpx;
    display: flex;
    align-items: center;
  }
}

.evaluate-form-row {
  display: flex;
  align-items: center;
  min-height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .name {
    width: 150rpx;
    font-size: #232323;
    font-weight: 28rpx;
    font-weight: bold;
  }

  .value {
    color: rgba(35, 35, 35, 0.8);
    font-size: 28rpx;
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
  }

  .picker-item {
    color: rgba(136, 136, 136, 0.8);
    font-size: 28rpx;
    display: flex;
    align-items: center;
  }

  input {
    text-align: right;
  }
}

.checkbox-view {
  display: flex;
  flex-direction: column;
  min-height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .top {
    display: flex;
    align-items: center;

    .name {
      width: 150rpx;
      font-size: #232323;
      font-weight: 28rpx;
      font-weight: bold;
    }

    .value {
      color: rgba(35, 35, 35, 0.8);
      font-size: 28rpx;
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: flex-end;
    }
  }

  .checkbox-group-view {
    margin-top: 20rpx;
  }
}

.float-view {
  position: fixed;
  right: 0;
  bottom: 200rpx;
  z-index: 99;

  .item {
    display: flex;
    background: #f59a23;
    color: white;
    padding: 10rpx;
    border-top-left-radius: 50rpx;
    border-bottom-left-radius: 50rpx;
    margin-top: 20rpx;
    align-items: center;
    padding-left: 20rpx;

    .text {
      margin-left: 10rpx;
    }

    .recording-icon {
      border-radius: 50%;
      border: solid 1rpx red;

      .recording-icon-inner {
        width: 15rpx;
        height: 15rpx;
        background: red;
        margin: 10rpx;
      }
    }
  }
}
</style>
